---
title: Konfiguracja edytora
description: Skonfiguruj swój edytor do tworzenia z Astro.
i18nReady: true
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import Badge from "~/components/Badge.astro"

Dostosuj swój edytor kodu aby poprawić doświadczenie programowania z Astro i odblokować nowe funkcje.

## VS Code

[VS Code](https://code.visualstudio.com/) to popularny edytor kodu dla twórców stron internetowych, stworzony przez Microsoft. Silnik VS Code zasila również popularne przeglądarkowe edytory kodu, takie jak [GitHub Codespaces](https://github.com/features/codespaces) czy [Gitpod](https://gitpod.io/).

Astro działa z dowolnym edytorem kodu. VS Code jest jednak przez nas zalecany jeżeli chodzi o projekty Astro. Utrzymujemy oficjalne rozszerzenie [Astro dla VS Code](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode), które pozwala na korzystanie z kilku kluczowych funkcji i usprawnień dla deweloperów w projektach Astro.

- Podświetlanie składni w plikach `.astro`.
- Informacje o typach TypeScript w plikach `.astro`.
- [VS Code Intellisense](https://code.visualstudio.com/docs/editor/intellisense) do uzupełniania kodu, podpowiedzi i wiele więcej.

Aby zacząć już dziś, zainstaluj rozszerzenie [Astro dla VS Code](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode).

import ReadMore from '~/components/ReadMore.astro';

<ReadMore>Zobacz jak [skonfigurować TypeScript](/pl/guides/typescript/) w swoim projekcie Astro.</ReadMore>

## Zed

[Zed](https://zed.dev/) to edytor kodu o otwartym kodzie źródłowym, który zaczął wspierać Astro w wersji 0.123.2. [Rozszerzenie Astro](https://github.com/zed-industries/zed/tree/main/extensions/astro) możesz zainstalować w zakładce Extensions tego IDE. Dodaje ono funkcje takie jak podświetlanie składni, uzupełnianie kodu oraz formatowanie.

## JetBrains IDEs

Początkowe wsparcie dla Astro pojawiło się wraz z wydaniem WebStorm 2023.1. Oficjalne rozszerzenie możesz zainstalować w [JetBrains Marketplace](https://plugins.jetbrains.com/plugin/20959-astro), albo poprzez wyszukanie "Astro" w zakładce Plugins w ustawieniach edytora. Dostępne są funkcje takie jak podświetlanie składni, uzupełnianie kodu i formatowanie, z planami dodania jeszcze bardziej zaawansowanych funkcji w przyszłości. Rozszerzenie jest również dostępne dla wszystkich innych [IDE JetBrains obsługujących JavaScript](https://www.jetbrains.com/products/#lang=js&type=ide).

## Inne edytory kodu

Nasza niesamowita społeczność utrzymuje kilka rozszerzeń do innych popularnych edytorów, w tym:

- [Rozszerzenie VS Code na Open VSX](https://open-vsx.org/extension/astro-build/astro-vscode) <span style="margin: 0.25em;"><Badge text="Oficjalne" /></span> - Oficjalne rozszerzenie Astro dla VS Code, dostępne w rejestrze Open VSX dla otwartych platform takich jak [VSCodium](https://vscodium.com/)
- [Rozszerzenie Nova](https://extensions.panic.com/extensions/sciencefidelity/sciencefidelity.astro/) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="Społeczności" /></span> - Zapewnia podświetlanie składni i uzupełnianie kodu Astro w edytorze Nova
- [Plugin Vim](https://github.com/wuelnerdotexe/vim-astro) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="Społeczności" /></span> - Zapewnia podświetlanie składni, wcięcie i wsparcie dla zawijania kodu Astro wewnątrz Vim'a lub Neovim'a.
- Pluginy Neovim [LSP](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#astro) i [TreeSitter](https://github.com/virchau13/tree-sitter-astro) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="Społeczności" /></span> - Zapewniają podświetlanie składni, przetwarzanie drzewa i uzupełnianie kodu Astro wewnątrz Neovim
- Emacs - Zobacz [jak skonfigurować Emacs i Eglot](https://medium.com/@jrmjrm/configuring-emacs-and-eglot-to-work-with-astro-language-server-9408eb709ab0) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="Społeczności" /></span> aby działał z Astro
- [Podświetlanie składni Astro dla Sublime Text](https://packagecontrol.io/packages/Astro) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="Społeczności" /></span> - Pakiet Astro dla Sublime Text, dostępny w menedżerze pakietów Sublime Text.

## Edytory przeglądarkowe

Poza lokalnymi edytorami, Astro działa również dobrze w edytorach przeglądarkowych, w tym:

- [StackBlitz](https://stackblitz.com/) i [CodeSandbox](https://codesandbox.io/) - edytory online działające w przeglądarce, z wbudowanym podświetlaniem składni dla plików `.astro`. Nie wymagają instalacji ani konfiguracji!
- [GitHub.dev](https://github.dev/) - pozwala zainstalować rozszerzenie Astro dla VS Code jako [rozszerzenie webowe](https://code.visualstudio.com/api/extension-guides/web-extensions), co daje dostęp wyłącznie do niektórych funkcji pełnego rozszerzenia. Obecnie obsługiwane jest tylko podświetlanie składni.
- [Gitpod](https://gitpod.io/) - pełne środowisko deweloperskie w chmurze, w którym można zainstalować oficjalne rozszerzenie Astro VS Code z Open VSX.

## Inne narzędzia

### ESLint

[ESLint](https://eslint.org/) jest popularnym linterem dla JavaScript i JSX. Dla obsługi Astro można zainstalować [utrzymywany przez społeczność plugin](https://github.com/ota-meshi/eslint-plugin-astro).

Zobacz [wskazówki dla użytkowników](https://ota-meshi.github.io/eslint-plugin-astro/user-guide/) zawarte w projekcie, aby uzyskać więcej informacji na temat instalacji i konfiguracji ESLinta dla twojego projektu.

### Stylelint

[Stylelint](https://stylelint.io/) jest popularnym linterem dla CSS. Dla obsługi Astro można zainstalować [utrzymywaną przez społeczność konfigurację Stylint](https://github.com/ota-meshi/stylelint-config-html).

Instrukcje instalacji, integracje z edytorem oraz inne dodatkowe informacje znajdziesz w README projektu.

### Prettier

[Prettier](https://prettier.io/) to popularny formater dla JavaScript, HTML, CSS i wielu innych języków. Formatowanie kodu z Prettier jest dostępne automatycznie jeżeli korzystasz z rozszerzenia [Astro VS Code](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) albo z innych [rozszerzeń tworzonych przez społeczność](/pl/editor-setup/#inne-edytory-kodu).

Aby dodać wsparcie dla formatowania plików `.astro` poza edytorem (np. CLI), albo wewnątrz edytora, który nie obsługuje naszego narzędzia, użyj [oficjalnego plugina Astro Prettier](https://github.com/withastro/prettier-plugin-astro).

Aby zacząć, najpierw zainstaluj Prettier oraz nasz plugin:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm install --save-dev prettier prettier-plugin-astro
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm add -D prettier prettier-plugin-astro
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn add --dev prettier prettier-plugin-astro
  ```
  </Fragment>
</PackageManagerTabs>

Prettier wykryje wtedy plugin automatycznie i będzie go używał do przetwarzania plików `.astro`, gdy go uruchomisz:

```shell
prettier --write .
```

Zobacz [README plugina Prettier](https://github.com/withastro/prettier-plugin-astro/blob/main/README.md) aby uzyskać więcej informacji na temat obsługiwanych opcji, jak skonfigurować Prettier wewnątrz VS Code, i więcej.
